<template>
	<view class="detai">
		<!-- <image class="detail_img" src="@/static/swiper.png"></image> -->
		<image class="detail_img" :src="ip+data.img_url"></image>
		<view class="detail_al">
			<view class="detai_name">
				<view class="commercial">{{data.name}}</view>
				<view class="sold">已售：5000瓶(没有)</view>
			</view>
			<view class="detai_names">
				<view class="distribution">今日下单预计2天后生产配送</view>
				<image class="de_img" src="@/static/share.png"></image>
			</view>
		</view>
		<view class="label">
			<view class="label_s">
				<view class="label_size">商品标签</view>
				<view class="input_width"><u-input height="17rpx" v-model="data.tag_name" type="text" placeholder="请输入标签" :clearable="false"/></view>
				<image class="label_img" src="@/static/jux.png"></image>
			</view>
			<view class="label_s">
				<view class="label_size">商品分类</view>
				<view class="input_width"><u-input height="17rpx" v-model="data.category_name" type="text" placeholder="请输入标签" :clearable="false"/></view>
				<image class="label_img" src="@/static/jux.png"></image>
			</view>
			<view class="label_s">
				<view class="label_size">价格明细</view>
				<view class="Price">价格:￥{{data.sall_price}}</view>
			</view>
			<view class="label_s">
				<view class="label_size">商品库存</view>
				<view class="Price">库存:{{data.allow_num}}</view>
			</view>
		</view>
		<view class="bottom">
			<view class="bottom_size">商品详情(没有)</view>
			<image class="bottom_img" src="@/static/introduce.png" mode="widthFix"></image>
		</view>
	</view>
</template>

<script>
	export default {
			data() {
				return {
					id:null,
					data:{},
					ip:'',
				}
			},
			onLoad(options) {
				if (options.id) {
					this.id=options.id;
				/* 	this.getData(); */
				}
		/* 		this.ip=this.$api.BASE_URL; */
			},
			methods: {
				getData() {
					this.$api.request({
						url: 'product',
						method: 'GET',
						data: {
							id: this.id
						}
					}).then(res => {
						console.log('res', res);
						if (res.code == 200) {
							console.log(res.data);
							this.data=res.data
						}
					}).catch(err => {
						console.error(error);
					});
				},
	
			}
		}
</script>

<style scoped lang="scss">
	.detai{
		padding-bottom: 20rpx;
		background: #F4F5F7;
		.detail_img{
			width: 100%;
			height: 450rpx;
		}
		.detail_al{
			height: 130rpx;
			padding: 24rpx 20rpx;
			display: flex;
			flex-direction: column;
			align-items: center;
			justify-content: space-between;
			margin:-8rpx 0rpx  20rpx 0rpx;
			background: #FFF;
			.detai_name{
				width: 100%;
				display: flex;
				align-items: center;
				justify-content: space-between;
				.commercial{
					font-size: 28rpx;
					line-height: 39rpx;
					color: rgba(51, 51, 51, 1);
				}
				.sold{
					font-size: 20rpx;
					line-height: 28rpx;
					color: rgba(128, 128, 128, 1);
				}
				
			}
			.detai_names{
				margin-top: 17rpx;
				width: 100%;
				display: flex;
				align-items: center;
				justify-content: space-between;
				.distribution{
					font-size: 20rpx;
					line-height: 28rpx;
					color: rgba(166, 166, 166, 1);
				}
				.de_img{
					width: 35rpx;
					height: 35rpx;
				}
			}
		}
		.label{
			margin-bottom: 21rpx;
			// padding: 0rpx 20rpx;
			background: #FFF;
			.label_s{
				display: flex;
				align-items: center;
				justify-content: space-between;
				border-bottom: 1rpx solid #E3E3E3;
				height: auto;
				padding: 24rpx;
				.label_size{
					font-size: 24rpx;
					line-height: 33rpx;
					color: rgba(56, 56, 56, 1);
				}
				.input_width{
					width: 60%;
				}
				.label_img{
					width: 24rpx;
					height: 24rpx;
				}
				.Price{
					font-size: 24rpx;
					line-height: 33rpx;
					color: rgba(166, 166, 166, 1);
				}
			}
		}
		.bottom{
			background: #FFF;
			padding: 24rpx 20rpx 0rpx 20rpx;
			.bottom_size{
				font-size: 28rpx;
				line-height: 39rpx;
				color: rgba(56, 56, 56, 1);
				margin-bottom: 20rpx;
			}
			.bottom_img{
				width: 100%;
				// height: 100vh;
			}
		}
	}
	
</style>